<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> 淘宝界面-1</title>
		<script type="text/javascript"> 
			function showImg(){ 
			document.getElementById("wxImg").style.display='block'; 
			} 
			function hideImg(){ 
			document.getElementById("wxImg").style.display='none'; 
			} 
		</script> 
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			@font-face{
			font-family:iconfont;
			src:url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.eot);
			src:url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.eot?#iefix) format('embedded-opentype')
			,url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.woff) format('woff'),
			url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.ttf) format('truetype'),
			url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.svg#iconfont) format('svg');
			}
			.iconfont{
				font-family: iconfont!important;
    	 		font-size: 14px;	
			}
			.box{
				width: 100%;
				background-color: #F4F4F4;
			}
			.row{
				width:1190px;
				background-color: #f4f4f4;
				margin: 0 auto;
			}
			.col{
				width:590px;
				padding: 17px 21px 4px 17px;
				box-sizing: border-box;
				background-color: white;	
			}
			.col:first-child{
				margin-right: 10px;
			}
			body{
				font-family: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
				font-size: 14px;
				background-color: #f4f4f4;
			}
			.top{
				margin-bottom: 16px;
			}
			.top .txt{
				height: 24px;
				line-height: 24px;
			}
			.top .img img{
				height: 24px;
				margin-left: 4px;
				margin-right: 8px;
			}
			.top .txt{
				color:#999;
			}
			.txtr a{
				text-decoration: none;
				color:#999;
			}
			.top span{
				color:#ccc;
				font-size: 20px;
			}
			.clearfix:after{
				display:table;
				content:"";
				clear: both;
			}
			.fl{
				float:left;
			}
			.fr{
				float:right;
			}
			#wxImg img{
				width:60px;
				margin:8px 10px 0px 10px;
			}
			#wxImg {
				width: 140px;
				height: 140px;
				margin-left: 70px;
				margin-top: -20px;
			}
			p{
				font-size: 12px;
				text-align: center;
			}
			.top .iconfont a{
				text-decoration: none;
				color: #CCCCCC;
			}
			li{
				list-style: none;
				margin-left: 4px;
				width:180px;
				float: left;
				line-height: 20px;
				margin-top: 4px;
				margin-bottom: 17px;
			}
			ul{
				width: 590px;
			}
			li .txt{
				margin: 0px 6px;
				box-sizing: border-box;
			}
			li .txt1{
				margin-top: 8px;
				color:#3C3C3C;
			}
			li .txt1 a{
				color:#3C3C3C;
				text-decoration: none;
			}
			li:hover .txt a{
				color: #f40;
			}
			li .txt2{
				margin-top: 4px;
				color:#999;
			}
			li .txt3{
				margin-top: 6px;
				color:#35b1ff;
			}
			li .txt4{
				margin-top: 8px;
				line-height: 18px;
			}
			li .txt4 .iconfont{
				color: #ccc;
			}
			li .txt4 a{
				text-decoration: none;
				color:#999;
			}
			li .txt5 img{
				width:22px;
				height: 22px;
				border-radius:50%;
				margin-right: 8px;
			}
			li .txt5{
				margin-top: 12px;
				color:#999;
			}
			.col .iconfont{
				margin-right: 6px;
			}
			li .txt1 img{
				margin-bottom: -2px;
				margin-right: 2px;
			}
			img{
				vertical-align: middle;
			}
			li .img{
				background-color: #4f4f4f;
			}
			li img{
				opacity:0.9;
			}
			li:first-of-type .col img{
				opacity: 1;
			}
			li .img a:hover img{
				opacity:0.8;
			}
			
		</style>
		<link href="style.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="row clearfix">
			<div class="col fl">
				<div class="top clearfix">
					<div class="img fl"><img src="image/icon-1.png" title="有好货" /></div>
					<div class="txt txtl fl"><span class="iconfont"><a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()">&#xe610;</a></span>与品质生活不期而遇</div>
					<div class="txt txtr fr"><a href="#">换一换</a></div>
				</div>
				<div id="wxImg" style="display:none;height:100px;width:80px;background-color: blanchedalmond;position:absolute;"><img src="image/icon-4.png" /><p>手机二维码扫一扫</p></div>
				<ul class="clearfix">
					<li>
						<div class="img"><a href="#"><img src="image/img-2.jpg"  style="opacity: 1;"/></a></div>
						<div class="txt txt1"><a href="#">TAMMYTANGS皮衣外套</a></div>
						<div class="txt txt2">颜色很独特的一款收腰绑</div>
						<div class="txt txt3"><span class="iconfont">&#xe676;</span>0 人说好</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-1.jpg" /></a></div>
						<div class="txt txt1"><a href="#"><img src="image/icon-3.png" />【秋季新态度】</a></div>
						<div class="txt txt2">陌上花开，生活在左文艺绣</div>
						<div class="txt txt3"><span class="iconfont">&#xe676;</span>11 人说好</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-3.jpg" /></a></div>
						<div class="txt txt1"><a href="#"><img src="image/icon-3.png" />Lily 条纹印花卫</a></div>
						<div class="txt txt2">经典条纹元素与特色印花设</div>
						<div class="txt txt3"><span class="iconfont">&#xe676;</span>9 人说好</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-4.jpg" /></a></div>
						<div class="txt txt1"><a href="#">太平鸟罗纹夹克式棉服</a></div>
						<div class="txt txt2">精致的罗纹领口，自带按扣</div>
						<div class="txt txt3"><span class="iconfont">&#xe676;</span>0 人说好</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-5.jpg" /></a></div>
						<div class="txt txt1"><a href="#">ONE MORE立领羊毛大衣</a></div>
						<div class="txt txt2">小立领衬托优雅知性气质</div>
						<div class="txt txt3"><span class="iconfont">&#xe676;</span>0 人说好</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-6.jpg" /></a></div>
						<div class="txt txt1"><a href="#"><img src="image/icon-3.png" />斜纹双排扣棉质</a></div>
						<div class="txt txt2">西装领大贴布长袖设计优雅</div>
						<div class="txt txt3"><span class="iconfont">&#xe676;</span>35 人说好</div>
					</li>
				</ul>
			</div>
			<div class="col fl">
				<div class="top clearfix">
					<div class="img fl"><img src="image/icon-2.png" title="爱逛街"/></div>
					<div class="txt txtl fl">献给聪明可爱的你</div>
					<div class="txt txtr fr"><a href="#">更多></a></div>
				</div>
				<ul class="clearfix">
					<li>
						<div class="img"><a href="#"><img src="image/img-7.jpg" /></a></div>
						<div class="txt txt4"><span class="iconfont">&#xe621;</span><a href="#">博倩发胶快速定型蓬松<br />
						男啫喱水膏干胶清香头发</a></div>
						<div class="txt txt5"><img src="image/tx-1.jpg" />爱逛***01</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-8.jpg" /></a></div>
						<div class="txt txt4"><span class="iconfont">&#xe621;</span><a href="#">丽悦暖贴宝宝贴自发热<br />
						防寒保暖身贴宫暖贴足暖</a></div>
						<div class="txt txt5"><img src="image/tx-2.jpg" />潮流女孩girl</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-9.jpg" /></a></div>
						<div class="txt txt4"><span class="iconfont">&#xe621;</span><a href="#">美暖迪暖脚宝插电暖脚<br />
						垫暖脚暖脚板办公室电热</a></div>
						<div class="txt txt5"><img src="image/tx-3.jpg" />潮范时光机</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-10.jpg" /></a></div>
						<div class="txt txt4"><span class="iconfont">&#xe621;</span><a href="#">三层加厚珊瑚绒夹棉睡<br />
						衣男士冬季长袖加绒法兰</a></div>
						<div class="txt txt5"><img src="image/tx-1.jpg" />爱逛***01</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-11.jpg" /></a></div>
						<div class="txt txt4"><span class="iconfont">&#xe621;</span><a href="#">碧迪思眼霜去女黑眼圈<br />
						眼袋细纹保湿补水提拉紧</a></div>
						<div class="txt txt5"><img src="image/tx-3.jpg" />潮范时光机</div>
					</li>
					<li>
						<div class="img"><a href="#"><img src="image/img-12.jpg" /></a></div>
						<div class="txt txt4"><span class="iconfont">&#xe621;</span><a href="#">【包邮包税】卡乐比株<br />
						式会社水果麦片800g袋装 </a></div>
						<div class="txt txt5"><img src="image/tx-2.jpg" />潮流女孩girl</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
